<script setup>
	import { ref, onMounted } from 'vue'
	import { useUserStore } from '@/store/userInfo'
	import { useShopStore } from '@/store/shop'

	const userStore = useUserStore()
	const shopApi = uniCloud.importObject('shop')
	const shopStore = useShopStore()
	const formData = ref({
		shop_name: '',
		shop_avatar: '',
		shop_desc: ''
	})

	// 选择图片
	const chooseImage = async () => {
		try {
			const res = await uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera']
			})

			uni.showLoading({
				title: '上传中...'
			})

			const uploadRes = await uniCloud.uploadFile({
				filePath: res.tempFilePaths[0],
				cloudPath: `shop/avatar/${Date.now()}.jpg`
			})

			formData.value.shop_avatar = uploadRes.fileID
			uni.hideLoading()

		} catch (e) {
			uni.hideLoading()
			uni.showToast({
				title: '上传失败',
				icon: 'none'
			})
		}
	}

	// 提交表单
	const submitForm = async () => {
		if (!formData.value.shop_name) {
			uni.showToast({
				title: '请输入店铺名称',
				icon: 'none'
			})
			return
		}

		try {
			uni.showLoading({
				title: '保存中...'
			})

			// 传入角色信息
			await shopApi.updateShopInfo(formData.value, userStore.userInfo.role[0])

			// 更新 shopStore 中的数据
			shopStore.setShopInfo({
				shop_name: formData.value.shop_name,
				shop_avatar: formData.value.shop_avatar,
				shop_desc: formData.value.shop_desc
			})

			uni.hideLoading()
			uni.showToast({
				title: '保存成功',
				icon: 'success'
			})

			// 延迟返回
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)

		} catch (e) {
			uni.hideLoading()
			uni.showToast({
				title: e.message || '保存失败',
				icon: 'none'
			})
		}
	}

	// 获取店铺信息
	const getShopInfo = async () => {
		try {
			uni.showLoading({
				title: '加载中...'
			})

			// 传入角色信息
			const result = await shopApi.getShopInfo(userStore.userInfo.role[0])
			if (result.errCode === 0 && result.data) {
				formData.value = result.data
			}

			uni.hideLoading()
		} catch (e) {
			uni.hideLoading()
			uni.showToast({
				title: e.message || '获取信息失败',
				icon: 'none'
			})
			console.error('获取店铺信息失败:', e)
		}
	}

	onMounted(() => {
		getShopInfo()
	})
</script>

<template>
	<view class="shop-info">
		<view class="form-container">
			<form @submit="submitForm">
				<!-- 店铺头像 -->
				<view class="avatar-section">
					<view class="label">店铺头像</view>
					<view class="avatar-upload" @tap="chooseImage">
						<image v-if="formData.shop_avatar" :src="formData.shop_avatar" mode="aspectFill"
							class="avatar-image" />
						<view v-else class="upload-placeholder">
							<uni-icons custom-prefix="iconfont" type="yuan-tianjia" color="#999" :size="24" />
						</view>
					</view>
				</view>

				<!-- 店铺名称 -->
				<view class="form-item">
					<view class="label">店铺名称</view>
					<input type="text" v-model="formData.shop_name" placeholder="请输入店铺名称" />
				</view>

				<!-- 店铺说明 -->
				<view class="form-item">
					<view class="label">店铺说明</view>
					<textarea v-model="formData.shop_desc" placeholder="请输入店铺说明" />
				</view>

				<!-- 提交按钮 -->
				<button class="submit-btn" @tap="submitForm">保存修改</button>
			</form>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.shop-info {
		min-height: 100vh;
		padding: 24rpx;
		background-color: $page-bg-color;

		.form-container {
			padding: 24rpx;
			background-color: #fff;
			border-radius: 16rpx;

			.avatar-section {
				margin-bottom: 32rpx;

				.label {
					margin-bottom: 16rpx;
					font-size: 28rpx;
					color: $text-font-color-2;
				}

				.avatar-upload {
					width: 160rpx;
					height: 160rpx;
					border-radius: 16rpx;
					overflow: hidden;
					background-color: $page-bg-color;

					.avatar-image {
						width: 100%;
						height: 100%;
					}

					.upload-placeholder {
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						border: 2rpx dashed #ddd;
					}
				}
			}

			.form-item {
				margin-bottom: 32rpx;

				.label {
					margin-bottom: 16rpx;
					font-size: 28rpx;
					color: $text-font-color-2;
				}

				input,
				textarea {
					width: 100%;
					padding: 20rpx;
					background-color: $page-bg-color;
					border-radius: 12rpx;
					font-size: 28rpx;
					color: $text-font-color-1;
				}

				textarea {
					height: 200rpx;
				}
			}

			.submit-btn {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background-color: $brand-theme-color;
				color: #fff;
				font-size: 32rpx;
				border-radius: 44rpx;
				margin-top: 48rpx;

				&:active {
					opacity: 0.9;
				}
			}
		}
	}
</style>